<template>
    <view class="live-camera" :style="{ width: windowWidth+'rpx', height: windowHeight+'rpx' }">
        <view class="preview" :style="{ width: windowWidth+'rpx', height: windowHeight+'rpx' }">
            <live-pusher
                id="livePusher"
                ref="livePusher"
                class="livePusher"
                mode="FHD"
                beauty="0"
                whiteness="0"
                :aspect="aspect"
                min-bitrate="1000"
                audio-quality="16KHz"
                device-position="back"
                :auto-focus="true"
                :muted="true"
                :enable-camera="true"
                :enable-mic="false"
                orientation="vertical"
                :zoom="true"
                :style="{ width: cameraWidth+'rpx', height: cameraHeight+'rpx' }"
                @statechange="statechange"
            ></live-pusher>

            <!--提示语-->
            <!-- <cover-view class="remind">
                <text class="remind-text" style="">{{ message }}</text>
            </cover-view> -->

            <!--辅助线-->
            <!-- <cover-view class="outline-box" :style="{ width: windowWidth, height: windowHeight - 80 }">
				<cover-image
					class="outline-img"
					:src="dotype == 'idcardface' ? '/static/live-camera/outline/idcardface.png' : '/static/live-camera/outline/idcardbadge.png'"
					style=""
				></cover-image>
			</cover-view> -->
        </view>

        <view class="menu">
            <!--底部菜单区域背景-->
            <cover-image class="menu-mask" src="/static/live-camera/bar.png"></cover-image>

            <!--返回键-->
            <cover-image
                class="menu-back"
                src="/static/live-camera/back.png"
                @tap="back"
            ></cover-image>

            <!--快门键-->
            <cover-image
                class="menu-snapshot"
                src="/static/live-camera/shutter.png"
                @tap="snapshot"
            ></cover-image>

            <!--反转键-->
            <cover-image
                class="menu-flip"
                src="/static/live-camera/flip.png"
                @tap="flip"
            ></cover-image>
        </view>
    </view>
</template>

<script>
let _this = null;
export default {
    data() {
        return {
            poenCarmeInterval: null, // 打开相机的轮询
            dotype: 'face', // 操作类型
            message: '', // 提示
            aspect: '3:3', // 比例
            cameraWidth: '', // 相机画面宽度
            cameraHeight: '', // 相机画面宽度
            windowWidth: '', // 屏幕可用宽度
            windowHeight: '', // 屏幕可用高度
            camerastate: false, // 相机准备好了
            livePusher: null, // 流视频对象
            snapshotsrc: null, // 快照
        };
    },
    onLoad(e) {
        _this = this;
        this.dotype = e.dotype;
        this.initCamera();
    },
    onReady() {
        this.livePusher = uni.createLivePusherContext('livePusher', this);
        this.startPreview(); // 开启预览并设置摄像头
        this.poenCarme();
    },
    methods: {
        // 轮询打开
        poenCarme() {
            // #ifdef APP-PLUS
            if (plus.os.name == 'Android') {
                this.poenCarmeInterval = setInterval(() => {
                    console.log(_this.camerastate);
                    if (!_this.camerastate) _this.startPreview();
                }, 2500);
            }
            // #endif
        },
        // 初始化相机
        initCamera() {
            
            // 处理安卓手机异步授权问题
            uni.getSystemInfo({
            	success: function(res) {
					console.log('res----',res)
            		_this.windowWidth = res.windowWidth*0.5;
            		_this.windowHeight = res.windowHeight*0.5;
            		_this.cameraWidth = res.windowWidth*0.6;
            		_this.cameraHeight = res.windowHeight*0.6;
            		console.log('宽度----',_this.windowHeight,'高度---',_this.windowHeight)
            	}
            });
        },
        // 开始预览
        startPreview() {
            this.livePusher.startPreview({
                success: a => {
                    console.log(a);
                },
            });
        },

        // 停止预览
        stopPreview() {
            this.livePusher.stopPreview({
                success: a => {
                    _this.camerastate = false; // 标记相机未启动
                },
            });
        },

        // 状态
        statechange(e) {
            // 状态改变
            console.log(e);
            if (e.detail.code == 1007) {
                _this.camerastate = true;
            } else if (e.detail.code == -1301) {
                _this.camerastate = false;
            }
        },

        // 返回
        back() {
            uni.navigateBack();
        },

        // 抓拍
        snapshot() {
            this.livePusher.snapshot({
                success: e => {
                    _this.snapshotsrc = e.message.tempImagePath;
                    _this.stopPreview();
                    _this.setImage();
                    uni.navigateBack();
                },
            });
        },

        // 反转
        flip() {
            this.livePusher.switchCamera();
        },

        // 设置
        setImage() {
            let pages = getCurrentPages();
            let prevPage = pages[pages.length - 2]; // 上一个页面

            // 直接调用上一个页面的setImage()方法，把数据存到上一个页面中去
            prevPage.$vm.setImage({ path: _this.snapshotsrc, dotype: this.dotype });
        },
    },
};
</script>

<style lang="scss">
.live-camera {
    .preview {
        justify-content: center;
        align-items: center;
        .outline-box {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            z-index: 99;
            align-items: center;
            justify-content: center;
            .outline-img {
                width: 750rpx;
                height: 1125rpx;
            }
        }
        .remind {
            position: absolute;
            top: 880rpx;
            width: 750rpx;
            z-index: 100;
            align-items: center;
            justify-content: center;
            .remind-text {
                color: #dddddd;
                font-weight: bold;
            }
        }
    }
    .menu {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100rpx;
        height: 750rpx;
        z-index: 98;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .menu-mask {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100rpx;
            height: 750rpx;
            z-index: 98;
        }
        .menu-back {
            position: absolute;
            left: 30rpx;
            right: 50rpx;
            width: 50.781rpx;
            height: 50.781rpx;
            z-index: 99;
            align-items: center;
            justify-content: center;
        }
        .menu-snapshot {
            width: 50.781rpx;
            height: 50.781rpx;
            z-index: 99;
            margin-top: 350rpx;
        }
        .menu-flip {
            position: absolute;
            right: 25rpx;
            bottom: 30rpx;
            width: 50.781rpx;
            height: 50.781rpx;
            z-index: 99;
            align-items: center;
            justify-content: center;
        }
    }
}
</style>
